@import '~@hi-ui/core-css/lib/index.scss';

$prefix: '#{$component-prefix}-slider' !default;

.#{$prefix} {
  $color: var(with-prefix-var('slider-color'), use-color-mode('primary'));

  box-sizing: border-box;
  color: use-color('gray', 800);
  font-size: use-text-size('normal');
  font-variant: tabular-nums;
  line-height: use-text-lineheight('normal');
  list-style: none;
  position: relative;
  z-index: use-zindex('normal');
  // 属于自定义空间，不属于designToken规范
  height: 12px;
  margin: 10px 6px;
  padding: 4px 0;

  &.#{$prefix}--disabled {
    cursor: not-allowed;

    > div {
      cursor: not-allowed;
    }

    .#{$prefix}__rail {
      background: use-color('gray', 100);
    }

    .#{$prefix}__track {
      background: use-color('gray', 300);
    }

    .#{$prefix}__handle {
      border-color: use-color('gray', 300);

      &:focus {
        box-shadow: none;
      }
    }
  }

  &.#{$prefix}--vertical {
    height: 100%;
    width: 12px;
    margin: 6px 10px;
    padding: 0 4px;

    .#{$prefix}__rail {
      width: 4px;
    }

    .#{$prefix}__track {
      width: 4px;
    }

    .#{$prefix}__handle {
      margin-left: -5px;
      margin-top: 0;
      transform: translateY(-50%);
    }

    .#{$prefix}__marks {
      position: absolute;
      width: 4px;
      height: 100%;
    }

    .#{$prefix}__mark {
      position: absolute;
      border-radius: use-border-radius('full');
      transform: translate(-50%, 50%);
      left: 2px;
    }

    .#{$prefix}__labels {
      height: 100%;
      width: 40px;
      position: absolute;
      margin: 0;
      right: 18px;
      text-align: right;

      .#{$prefix}__label {
        right: 0;
      }

      .#{$prefix}__min {
        transform: translateX(0%);
        position: absolute;
        right: 0;
        margin-top: 0;
        text-align: right;
      }

      .#{$prefix}__max {
        transform: translateX(0%);
        position: absolute;
        right: 0;
        margin-top: 0;
        text-align: right;
      }
    }
  }

  &__rail {
    position: absolute;
    width: 100%;
    height: 4px;
    background-color: use-color('gray', 200);
    border-radius: use-border-radius('sm');
    cursor: pointer;
  }

  &__marks {
    position: absolute;
    width: 100%;
    height: 4px;
    background: 0 0;
    cursor: pointer;
    // z-index: -1;
  }

  &__mark {
    position: absolute;
    border-radius: use-border-radius('full');
    transform: translate(-50%, 0%);
    box-sizing: border-box;
    width: 10px;
    height: 10px;
    margin-top: -4px;
    background-color: use-color-static('white');
    border: use-border-size('semibold') use-color('gray', 200);
    transition-property: background-color;
    transition-duration: use-motion-duration('normal');
    transition-timing-function: use-motion-bezier('normal');

    &[data-checked] {
      border-color: use-color-mode('primary');
    }
  }

  .#{$prefix}__labels {
    width: 100%;
    height: 4px;
    background: 0 0;
  }

  .#{$prefix}__label {
    margin-top: 10px;
    position: absolute;

    &-dot {
      position: absolute;
      border-radius: 50%;
      cursor: pointer;
    }
  }

  .#{$prefix}__min {
    transform: translateX(-50%);
  }

  .#{$prefix}__max {
    transform: translateX(50%);
  }

  .#{$prefix}__handle {
    position: absolute;
    width: 14px;
    height: 14px;
    margin-top: -5px;
    background-color: use-color-static('white');
    border-radius: 50%;
    box-sizing: border-box;
    z-index: 20;
    cursor: pointer;
    transform: translateX(-50%);
    user-select: none;
    border: use-border-size('semibold') use-color-static('transparent');
    border-color: $color;

    &:focus {
      // 定制色，抽离变量
      box-shadow: 0 0 0 4px rgba(#4284f5, 0.2);
      outline: none;
    }
  }

  .#{$prefix}__track {
    position: absolute;
    height: 4px;
    // background: use-color-mode('primary');
    border-radius: 2px;
    background: $color;
  }

  .#{$prefix}__tooltip {
    opacity: 0;

    &-enter {
      opacity: 0;
    }

    &-enter-active {
      opacity: 1;
      transition: opacity 200ms;
    }

    &-enter-done {
      opacity: 1;
      transition: opacity 200ms;
    }

    &-exit {
      opacity: 1;
    }

    &-exit-done {
      opacity: 0;
      transition: opacity 200ms;
    }
  }
}
